<%@ page pageEncoding="UTF-8" %>
<div id="header">

    <div class="container">

        <a href="${BASE}/index" class="brand">Dashboard Admin</a>

        <a href="javascript:;" class="btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <i class="icon-reorder"></i>
        </a>
        <div class="nav-collapse">
            <ul id="main-nav" class="nav pull-right">

                <li class="nav-icon" id="nav1">
                    <a href="${BASE}/index">
                        <i class="icon-home"></i>
                        <span><f:message key="menu.home" /> </span>
                    </a>
                </li>

                <li class="dropdown"  id="nav2">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="icon-th"></i>
                        <span><f:message key="menu.components" /> </span>
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="${BASE}/elements"><f:message key="menu.components.elements"/> </a></li>
                        <li><a href="${BASE}/validation"><f:message key="menu.components.validation" /> </li>
                        <li><a href="${BASE}/jqueryui"><f:message key="menu.components.jqueryui"/> </a></li>
                        <li><a href="${BASE}/charts"><f:message key="menu.components.charts"/> </a></li>
                        <li><a href="${BASE}/bonus"><f:message key="menu.components.Bonus"/> </a></li>
                        <li class="dropdown-submenu">
                            <a tabindex="-1" href="#">Dropdown menu</a>
                            <ul class="dropdown-menu">
                                <li><a tabindex="-1" href="#">Second level link</a></li>
                                <li><a tabindex="-1" href="#">Second level link</a></li>
                                <li><a tabindex="-1" href="#">Second level link</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>

                <li class="dropdown"  id="nav3">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="icon-copy"></i>
                        <span><f:message key="menu.sample_pages"/> </span>
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="${BASE}/faq"><f:message key="menu.sample_pages.faq"/> </a></li>
                        <li><a href="${BASE}/gallery"><f:message key="menu.sample_pages.gallery"/> </a></li>
                        <li><a href="${BASE}/pricing"><f:message key="menu.sample_pages.Pricing"/> </a></li>
                        <li><a href="${BASE}/reports"><f:message key="menu.sample_pages.Reports"/> </a></li>
                        <li><a href="${BASE}/settings"><f:message key="menu.sample_pages.Settings"/> </a></li>
                    </ul>
                </li>

                <li class="dropdown"  id="nav4">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="icon-external-link"></i>
                        <span><f:message key="menu.extras"/> </span>
                        <b class="caret"></b>
                    </a>

                    <ul class="dropdown-menu">
                        <li><a href="${BASE}/login"><f:message key="menu.extras.Login"/> </a></li>
                        <li><a href="${BASE}/signup"><f:message key="menu.extras.Signup"/> </a></li>
                        <li><a href="${BASE}/error"><f:message key="menu.extras.Error"/> </a></li>
                        <li><a href="${BASE}/skins"><f:message key="menu.extras.Skins"/> </a></li>
                        <li><a href="${BASE}/sticky"><f:message key="menu.extras.Sticky"/> </a></li>
                    </ul>
                </li>
            </ul>

        </div> <!-- /.nav-collapse -->

    </div> <!-- /.container -->

</div> <!-- /#header -->